<template>
	<view>

		<view class="header">
			<u-dropdown menu-icon="arrow-down-fill" menu-icon-size="12" title-size="24" active-color="#3458A2"
				height="100" :border-bottom="true">
				<u-dropdown-item v-for="(c,i) in list" v-if="i<3" :key="i" :title="c.time" :options="c.options">
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="header">
			<u-dropdown menu-icon="arrow-down-fill" menu-icon-size="12" title-size="24" active-color="#3458A2"
				height="100" :border-bottom="true">
				<u-dropdown-item v-for="(c,i) in list" v-if="i>2" :key="i" :title="c.time" :options="c.options">
				</u-dropdown-item>
			</u-dropdown>
		</view>

		<view class="footer-list-s-center">
			<view class="charts-box">

				<qiun-data-charts type="mix" :chartData="index.S2021621" :errorShow="false" :echartsApp="true"
					:inScrollView="true" :disableScroll="true" background="none" :opts="index.s20216212" />
				<!-- chartDatas -->
				<!-- listsd -->

			</view>
		</view>


		<view class="footer-footer">

			<view class="footer-footer-header">
				<view>存贷比明细表</view>
				<view>（单位：亿元）</view>

				<view>
					<i class="el-icon-crop"></i>
				</view>

			</view>



			<view class="footer-footer-header-bottom">

				<view>
					<view v-for="(c,i) in footerList" :key="i">
						{{c}}
					</view>
				</view>


				<view>
					<view v-for="(c,i) in footerListd" :key="i" @click="optionList(i)">
						<view>
							{{c.dq}}
						</view>
						<view>
							<u-icon name="arrow-down-fill" color="#ccc" size="5"></u-icon>
						</view>

					</view>
				</view>

			</view>


			<view class="option-list">

				<view v-for="(c,i ) in footerListd" :key="i">

					<view v-for="(item,index ) in c.optionListsd1" v-show="c.fel" :key="index"
						@click="optionClick1(index,i)">
						{{item.text}}
					</view>

				</view>




			</view>



		</view>



		<view class="footeraaaaaaaaaaa">
			<el-table :data="tableData" :cell-style="cellStyle" :header-cell-style="tableHeaderColor">
				<el-table-column prop="AREA_ORG_NAME" label="地区" width="50">
				</el-table-column>
				<el-table-column prop="BANK" label="银行" width="120">
				</el-table-column>
				<el-table-column width="120" prop="TOTAL_VALUE" label="日均存款金额">
				</el-table-column>
				<el-table-column width="120" prop="FK_BALANCE_VALUE" label="日均贷款金额">
				</el-table-column>
				<el-table-column width="100" prop="AJ_BALANCE_VALUE" label="存贷比">
				</el-table-column>
			</el-table>

		</view>



	</view>









</template>

<script>
	import {arealdrdetail} from '../../../network/page/GroupO.js'
	import List from './ls.js'
	import index from '../echarts/index.js'
	export default {
		data() {
			return {
				index: index,
				list: [{
						time: "起止时间",
						fel: false,
						options: []
					},
					{
						time: "存款余额口径",
						fel: false,
						options: []
					},
					{
						time: "贷款余额口径",
						fel: false,
						options: []
					},
					{
						time: "按揭投放口径",
						fel: false,
						options: []
					},
					{
						time: "地区",
						fel: false,
						options: []
					}
				],
				footerList: [
					'存贷比参数1', '存贷比参数2', '排序参数'
				],
				footerListd: [{
						dq: '地区',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '银行',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '存贷比',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					}
				],
				tableData: [],
				List:List

			};
		},
		mounted() {
			
			arealdrdetail({
				depositCAL:'TOTA_A',
				loanCAL:'FK_A',
				mortgageCAL:'AJ_A',
				area:'香港',
				startTime:'2021-01-01',
				endTime:'2021-01-02',
				LDRCAL:'1',
			}).then(res=>{
				this.List=res.data
				console.log(this.List.data)
				
				// AJ_BALANCE_VALUE: 0 //按揭
							// AREA_ORG_NAME: "香港" //地区
							// BANK: "南洋商业" //银行
							// FK_BALANCE_VALUE: 13.58 // 贷款
							// TOTAL_VALUE: 0 //余额
							// percent: 0 //存贷比
							this.List.data.listmap.AREA_ORG_NAME='合计'
							this.List.data.listmap.BANK='-'
							this.List.data.list.unshift(this.List.data.listmap)
							this.tableData=this.List.data.list
							console.log(this.List.data.list)
							
							
							// AJYETOTAL: 0
							// AREA_ORG_NAME:'合计'
							// BANK:'-'
							// CKYETOTAL: 0
							// DKYETOTAL: 617.46
							// PERSENTTOTAL: 0
							
							
							
							
							// this.List.data.mapecharts 柱状图信息
							let zz1=[]
							let zx2=[]
							let dq1=[]
							this.List.data.mapecharts.forEach(res=>{
								dq1.push(res.bank)
								zz1.push(res.ckye)
								zx2.push(res.cdb)
								
							})
							console.log(zz1,zx2,dq1)
				// 柱状图底部渲染
							index.S2021621.categories=dq1
				// 柱状图底部渲染
				// 柱子的渲染
				index.S2021621.series[0].data=zz1
				// 柱子的渲染
				// 折线的渲染
				index.S2021621.series[1].data=zx2
				// 折线的渲染
				// this.List.data.mapecharts 柱状图信息
				
				
			})
			
			
			
			
			

			
			

		},
		methods: {
			optionClick1(index, i) {
				console.log(index, i)

			},
			optionList(i) {
				if (typeof(this.index) != 'number') {
					this.index = i
					this.footerListd.forEach(res => {
						res.fel = false
					})
					this.footerListd[i].fel = !this.footerListd[i].fel
				} else {
					this.footerListd.forEach(res => {
						res.fel = false
					})
					this.index = ''
				}



			},
			cellStyle(row, column, rowIndex, columnIndex) {
				return 'background:#F7F7F7'
			},
			tableHeaderColor(row) {
				return 'background:#F7F7F7'
			},

		}
	}
</script>
<style scoped src="../../css/css1-10/sanAllcss/sanAllcss.min.css">
</style>
<style scoped src="../../css/cssall/s.min.css"></style>

<style lang="scss" scoped>



</style>
